<template>
  <div>
    <div class="head">
      <el-button type="success" @click="addSpecifications">添加规格</el-button>
    </div>
    <div v-for="(item, index) in rowData" :key="index">
      <div class="box1">
        <el-input v-model="item.title" />
        <span @click="add(index)">添加规格值</span>
      </div>
      <div class="box2" v-for="(items, index) in item.values" :key="index">
        <el-input v-model="items.value" placeholder="请输入规格值" />
        <span class="iconfont icon-chacha" @click="deleteData(index)"></span>
      </div>
    </div>
    <!-- sku数据表 -->
    <div class="dind">
      <div>
        <el-button type="success" @click="refresh">刷新</el-button>
      </div>
      <div>
        <el-table :data="skuList" border style="width: 100%">
          <el-table-column
            v-for="item in tabularData"
            :label="item.title"
            :prop="item.title"
            :key="item.id"
          />
          <el-table-column prop="address" label="销售价">
            <template #default="scope">
              <el-input-number v-model="scope.row.price" />
            </template> </el-table-column
          >>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      specificationList: [],
      skuList: [], //表格数据
      rowData: [],
      tabularData: [],
    };
  },
  methods: {
    //添加规格
    addSpecifications() {
      this.rowData.push({
        title: "",
        values: [{ value: "" }],
      });
    },
    //删除数据
    deleteData(index) {
      console.log(index);
      this.rowData[index].values.splice(index, 1);
    },
    //添加规格值
    add(index) {
      console.log(index);
      this.rowData[index].values.push({ value: "" });
    },
    //刷新
    refresh() {
      let arr = [];
      this.rowData.forEach((item) => {
        arr.push(item.values);
      });
      console.log(arr);
      let arry = arr.reduce(
        (total, list) => {
          let aeer = [];
          total.forEach((item) => {
            list.forEach((items) => {
              aeer.push(item.concat(items));
            });
          });
          return aeer;
        },
        [[]]
      ); //拿到值

      this.skuList = arry.map((item) => {
        let obj = {
          price: 0,
        };
        this.rowData.forEach((val, index) => {
          obj[val.title] = item[index].value;
        });
        return obj;
      });
      this.tabularData = JSON.parse(JSON.stringify(this.rowData));
    },
  },
};
</script>

<style lang="less" scoped>
.dins {
  width: 1300px;
  margin: auto;
}
.dind {
  margin-top: 100px;
  /deep/ .el-input {
    width: 130px;
  }
}
/deep/ .el-input {
  width: 600px;
}
.box1 {
  margin-top: 10px;
  margin-bottom: 8px;
  display: flex;
  span {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 100px;
    text-align: center;
    color: blueviolet;
  }
}
.box2 {
  display: inline;
  margin-right: 8px;
  position: relative;
  margin-top: 15px;
  .el-input {
    width: 190px;
  }
  .iconfont {
    position: absolute;
    top: -4px;
    left: 178px;
  }
}
</style>
